<template>
	<view class="animation-slide-right" :style="[{animationDuration: '0.2s'}]">
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{info.name}}预约</block>
			<block slot="right"><text class="text-bold" @click="submit()">提交</text></block>
		</cu-custom>
		<view class="cu-list menu text-left margin-top">
			<view class="cu-item">
				<view class="content text-bold">场所名称</view>
				<view class="action">
					{{info.name}}
				</view>
			</view>
			<view class="cu-item">
				<view class="content text-bold">地址</view>
				<view class="action">
					{{info.address}}
				</view>
			</view>
		</view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">预约类型</view>
				<input v-model="info.name" name="input" disabled="disabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">同行人数</view>
				<input v-model="orderForm.applyNum" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">预约时间段</view>
				<picker @change="PickerChange" :value="pickerIndex" :range="picker" range-key="time">
					<view class="picker">
						{{pickerIndex>-1?picker[pickerIndex].time:'选择可用时间段'}}
					</view>
				</picker>
			</view>
			<view class="margin-left text-red">{{pickerIndex>-1?'当前时间段可预约人数：'+picker[pickerIndex].currApply:''}}</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userid:'',
				type: '',
				info: {},
				orderForm: {},
				picker: [],
				pickerIndex:-1
			}
		},
		onLoad(option) {
			this.initForm(option.id)
		},
		methods: {
			initForm(id) {
				this.userid=this.$store.getters.userid
				this.$http.get('/publicplace/znzfPublic/queryById', {
					params: {
						id: id
					}
				}).then((res) => {
					// console.log(res)
					if (res.data.success) {
						this.info = res.data.result
					} else {
						this.$tip.alert('获取信息失败' + res.data.message);
					}
				})
				this.$http.get('/publicplace/znzfPublicOpen/getByPublicId', {
					params: {
						publicId: id
					}
				}).then((res) => {
					// console.log(res)
					if (res.data.success) {
						this.picker=res.data.result
						this.timePicker()
					} else {
						this.$tip.alert('获取信息失败' + res.data.message);
					}
				})
			},
			timePicker(){
				for(let item of this.picker){
					console.log(item.start)
					item.time=item.start+' 至 '+item.end
				}
			},
			PickerChange(e) {				
				this.pickerIndex = e.detail.value
			},
			getCurrentTime() {
				//获取当前时间并打印
				var _this = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1 < 10 ? '0' + new Date().getMonth() : new Date().getMonth();
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				_this.gettime = yy + '-' + mm + '-' + dd;
				// console.log(_this.gettime)
				return _this.gettime
			},
			submit() {
				// 初始化
				// this.orderForm.eid=this.userid
				this.orderForm.publicOpenId=this.picker[this.pickerIndex].id
				console.log(this.orderForm)
				this.$http.get('/publicplace/znzfPublicApply/userReservation', {
					params: {
						applyNum: this.orderForm.applyNum,
						publicOpenId:this.orderForm.publicOpenId
					}
				}).then((res)=>{
					console.log(res)
					if (res.data.success) {
						this.$tip.success('预约成功!')
						this.$Router.replaceAll({
							name: 'myAppointment'
						})
					} else {
						this.$tip.alert(res.data.message);
					}
				})
			}
		}
	}
</script>

<style>

</style>
